<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>AI Chat Demo</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .chat-container {
            height: 400px;
            overflow-y: auto;
            border: 1px solid #ddd;
            padding: 10px;
            margin-bottom: 10px;
        }
        .message {
            margin-bottom: 10px;
            padding: 10px;
            border-radius: 5px;
        }
        .user-message {
            background-color: #e3f2fd;
            margin-left: 20%;
        }
        .ai-message {
            background-color: #f5f5f5;
            margin-right: 20%;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <h2>AI Chat Demo</h2>
        
        <!-- Model Selection -->
        <div class="mb-3">
            <label class="form-label">选择模型：</label>
            <div class="btn-group" role="group">
                <input type="radio" class="btn-check" name="modelType" id="openai" value="openai" checked>
                <label class="btn btn-outline-primary" for="openai">OpenAI</label>
                
                <input type="radio" class="btn-check" name="modelType" id="ollama" value="ollama">
                <label class="btn btn-outline-primary" for="ollama">Ollama</label>
                
                <input type="radio" class="btn-check" name="modelType" id="zhipuai" value="zhipuai">
                <label class="btn btn-outline-primary" for="zhipuai">智谱AI</label>
            </div>
        </div>

        <!-- Chat Section -->
        <div class="card mb-4">
            <div class="card-header">
                聊天
            </div>
            <div class="card-body">
                <div class="chat-container" id="chatContainer"></div>
                <div class="input-group">
                    <input type="text" class="form-control" id="messageInput" placeholder="输入消息...">
                    <button class="btn btn-primary" onclick="sendMessage()">发送</button>
                </div>
            </div>
        </div>

        <!-- Knowledge Base Section -->
        <div class="card">
            <div class="card-header">
                知识库搜索
            </div>
            <div class="card-body">
                <div class="input-group">
                    <input type="text" class="form-control" id="searchInput" placeholder="输入搜索关键词...">
                    <button class="btn btn-primary" onclick="searchKnowledge()">搜索</button>
                </div>
                <div id="searchResult" class="mt-3"></div>
            </div>
        </div>
    </div>

    <script>
        function getSelectedModel() {
            return document.querySelector('input[name="modelType"]:checked').value;
        }

        function appendMessage(message, isUser) {
            const chatContainer = document.getElementById('chatContainer');
            const messageDiv = document.createElement('div');
            messageDiv.className = `message ${isUser ? 'user-message' : 'ai-message'}`;
            messageDiv.textContent = message;
            chatContainer.appendChild(messageDiv);
            chatContainer.scrollTop = chatContainer.scrollHeight;
        }

        async function sendMessage() {
            const messageInput = document.getElementById('messageInput');
            const message = messageInput.value.trim();
            if (!message) return;

            appendMessage(message, true);
            messageInput.value = '';

            try {
                const response = await fetch('/chat', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: `message=${encodeURIComponent(message)}&modelType=${getSelectedModel()}`
                });
                const reply = await response.text();
                appendMessage(reply, false);
            } catch (error) {
                console.error('Error:', error);
                appendMessage('发生错误，请稍后重试。', false);
            }
        }

        async function searchKnowledge() {
            const searchInput = document.getElementById('searchInput');
            const query = searchInput.value.trim();
            if (!query) return;

            try {
                const response = await fetch('/search', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: `query=${encodeURIComponent(query)}`
                });
                const result = await response.text();
                document.getElementById('searchResult').innerHTML = result;
            } catch (error) {
                console.error('Error:', error);
                document.getElementById('searchResult').innerHTML = '搜索时发生错误，请稍后重试。';
            }
        }

        // 支持按回车发送消息
        document.getElementById('messageInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });
    </script>
</body>
</html> 